<template>
  <div class="tree-decoration-container">
    <div class="tree-decoration tree-1"></div>
    <div class="tree-decoration tree-2"></div>
    <div class="tree-decoration tree-3"></div>
    <div class="leaf-decoration leaf-1"></div>
    <div class="leaf-decoration leaf-2"></div>
    <div class="leaf-decoration leaf-3"></div>
  </div>
</template>

<script>
export default {
  name: 'TreeDecoration'
}
</script>

<style lang="scss" scoped>
.tree-decoration-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.tree-decoration {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 80px;
  background: linear-gradient(to bottom, #6D4C41, #8D6E63);
  border-radius: 10px 10px 0 0;
  
  &::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #4CAF50;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #66BB6A;
  }
  
  &.tree-1 {
    left: 10%;
    height: 60px;
    width: 30px;
    opacity: 0.6;
    animation: tree-sway 4s ease-in-out infinite;
  }
  
  &.tree-2 {
    left: 70%;
    height: 70px;
    width: 35px;
    opacity: 0.7;
    animation: tree-sway 5s ease-in-out infinite 0.5s;
  }
  
  &.tree-3 {
    left: 85%;
    height: 50px;
    width: 25px;
    opacity: 0.5;
    animation: tree-sway 3.5s ease-in-out infinite 1s;
  }
}

.leaf-decoration {
  position: absolute;
  width: 15px;
  height: 15px;
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  border-radius: 0 100% 0 100%;
  opacity: 0.7;
  
  &.leaf-1 {
    top: 20%;
    left: 15%;
    transform: rotate(45deg);
    animation: leaf-fall 8s ease-in-out infinite;
  }
  
  &.leaf-2 {
    top: 30%;
    left: 75%;
    transform: rotate(15deg);
    animation: leaf-fall 10s ease-in-out infinite 2s;
  }
  
  &.leaf-3 {
    top: 15%;
    left: 60%;
    transform: rotate(75deg);
    animation: leaf-fall 9s ease-in-out infinite 4s;
  }
}

@keyframes tree-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

@keyframes leaf-fall {
  0% { transform: translateY(0) rotate(45deg); opacity: 0.7; }
  50% { transform: translateY(10px) rotate(60deg); opacity: 0.5; }
  100% { transform: translateY(0) rotate(45deg); opacity: 0.7; }
}
</style>